<template>
  <div class="simulation-panel2 entity-log">
    <div class="toolbar">
      <span class="title">日志</span>
      <a @click="handleClose"><el-icon><Close /></el-icon></a>
    </div>
    <div class="container">
      <el-scrollbar id="timeline" class="panel-timiline">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in treeData" :key="index">
            {{ item.content }}
          </el-timeline-item>
        </el-timeline>
      </el-scrollbar>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch, nextTick } from "vue";
import { Close } from '@element-plus/icons-vue';
import { IEntityLogPanel } from "@@/typings/panel";
import { simulPanelStateTuiyan, simulationStateTuiyan } from "@@/store-tuiyan/modules";

export default defineComponent({
  name: "EntityList",
  components: {
    Close
  },
  setup() {
    const simulStore = simulationStateTuiyan(),
      panelStore = simulPanelStateTuiyan(),
      state = reactive<{
        treeData: IEntityLogPanel[];
      }>({
        treeData: [...simulStore.entityLog.blue, ...simulStore.entityLog.red],
      }),
      methods = {
        // 关闭
        handleClose: () => {
          panelStore.logPanelShowTuiyan = false;
        },
      };

    watch(
      () => simulStore.currentPerspective,
      () => {
        switch (simulStore.currentPerspective) {
          case "all":
            state.treeData = [
              ...simulStore.entityLog.blue,
              ...simulStore.entityLog.red,
            ];
            break;
          case "red":
            state.treeData = [...simulStore.entityLog.red];
            break;
          case "blue":
            state.treeData = [...simulStore.entityLog.blue];
            break;
        }
        nextTick(() => {
          let div = document.getElementById("timeline");
          if (div) {
            div.scrollTop = div.scrollHeight;
          }
        });
      }
    );

    watch(
      () => [simulStore.entityLog.red, simulStore.entityLog.blue],
      () => {
        switch (simulStore.currentPerspective) {
          case "all":
            state.treeData = [
              ...simulStore.entityLog.blue,
              ...simulStore.entityLog.red,
            ];
            break;
          case "red":
            state.treeData = [...simulStore.entityLog.red];
            break;
          case "blue":
            state.treeData = [...simulStore.entityLog.blue];
            break;
        }
        nextTick(() => {
          let div = document.getElementById("timeline");
          if (div) {
            div.scrollTop = div.scrollHeight;
          }
        });
      }
    );

    nextTick(() => {
      let div = document.getElementById("timeline");
      if (div) {
        div.scrollTop = div.scrollHeight;
      }
    });

    return {
      ...toRefs(state),
      ...methods,
      simulStore,
    };
  },
});
</script>
<style lang="less" scoped>
@import "@@/assets/styles/panel.less";
.panel-timiline {
  height: 100%;
  color: white;
  padding-top: 5px;

  .el-timeline-item {
    font-size: 13px;
    padding-bottom: 5px;
  }
}
</style>
